<template>
  <div>
    <div style="margin-top: 40px; margin-left:50px; font-size:20px;color:#cccccc; ">
      <span>数字分身</span>
      <span style="color:#666666">(新建任务)</span>
    </div>
    <div style="width:100%;display: flex; justify-content: center;">
      <div class="MainListBox">
        <div v-for="(item, index) in list" :key="index">
          <div class="ListViewBox">
            <div class="ViewBox">
              <div style="width:280px; height:280px; display:flex; justify-content: center;align-items: center; ">
                <img :src="item.avatar" :onerror="defaultDhImg"  style="max-width:278px; max-height:278px">
              </div>
              <div style="height:40px; width:100%;margin-top:5px; overflow: hidden; float:left; background-color: #404040;">
                <div style="width:95%; height:40px;overflow: hidden; padding:5px;text-align: left;">
                  {{ item.dhname }}
                </div>
              </div>
              <div style="height:40px; width:100%; display: flex; flex-wrap: wrap;">
                <!-- <div style="white-space: nowrap; color: #989595; font-size: 12px; margin-left:10px;margin-top: 3px;">
                  <span>建立时间: {{ DatetimeToYDMH(item.ctime) }}</span>
                </div> -->
                <div style="white-space: nowrap; color: #989595; font-size: 12px; width:100%; margin-left:10px;margin-top: 15px;display: flex;justify-content: center;">
                  <el-button type="success" size="medium" icon="el-icon-circle-plus" style="width: 160px;" @click="AddTextTask_handleClick(item)">新建任务</el-button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import dimg from '@/assets/image/defaultdhimg.png'
import { getDhumanList as getList } from '@/api/dhuman'
import user from '@/store'

export default {
  name: 'dhuman',
  data() {
    return {
      defaultDhImg: 'this.src="' + dimg + '"',
      timer: null,
      list: null,
      listLoading: true,
      corpid: -1,
    }
  },
  mounted() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      this.listLoading = true
      const params = {
        corpid: user.getters.corpid,
        uid: user.getters.uid,
        nickname: user.getters.name,
      }
      this.list = null
      getList(params).then(response => {
        this.list = response.data.data
        this.listLoading = false
      })
    },
    DatetimeToYDMH(dateTimeStr) {
      const date = new Date(dateTimeStr)
      // 验证日期是否有效
      if (isNaN(date.getTime())) {
        throw new Error('Invalid date time string')
      }
      // 获取月和日
      const month = String(date.getMonth() + 1).padStart(2, '0') // getMonth() 返回的是从0开始的月份
      const day = String(date.getDate()).padStart(2, '0')
      // 获取时和分
      const hours = String(date.getHours()).padStart(2, '0')
      const minutes = String(date.getMinutes()).padStart(2, '0')
      // 拼接成所需的格式
      return `${month}-${day} ${hours}:${minutes}`
    },
    AddTextTask_handleClick(item) {
      console.log(item)
      this.$router.push({
        name: 'AddTextTask',
        query: {
          item: item,
        }
      })
    },
  }
}
</script>
<style scoped>
.MainListBox {
  color: #f1efef;
  font-size: 14px;
  min-width: 1500px;
  margin-top: 20px;
  margin-left: 40px;
  display: flex;
  flex-wrap: wrap;
  justify-content: None;
  min-height:300px;
}
.ListViewBox {
  width: 280px;
  height: 410px;
  margin:10px;
  border: 1px solid #333333;
  margin-bottom:70px;
}
.ViewBox {
  width: 100%;
  height: 400px;
}
</style>
